<!--笔记列表管理-->
<div class="col-sm-12" id="app"
	 style="margin-bottom: -20px;" xmlns:v-bind="http://www.w3.org/1999/xhtml">
	<div class="box box-primary">
		<div class="box-header with-border ui-sortable-handle" style="cursor: move;">
			<div class="pull-left btn-group">
				<label class="btn btn-primary fa fa-trash" onclick="delAll(1)">删除</label>
				<label class="btn btn-primary fa fa-unlock" onclick="changShareAll(0)">分享</label>
				<label class="btn btn-primary fa fa-unlock-alt" onclick="changShareAll(1)">不分享</label>
			</div>
			<div class="pull-right">
				<button type="button" id="btn_coll" class="btn btn-box-tool" data-widget="collapse">
					<i class="fa fa-minus"></i></button>
			</div>
			<!-- /.box-tools -->
		</div>
		<!-- /.box-header -->
		<div class="box-body row">
			<div class="form-group col-sm-2">
				<label>审核状态:</label>
				<select class="form-control" name="check">
					<option value="all">全部</option>
					<option value="1">已审核</option>
					<option value="0">未审核</option>
				</select>
			</div>
			<div class="form-group col-sm-2">
				<label>分享状态:</label>
				<select class="form-control" name="share">
					<option value="all">全部</option>
					<option value="0">已分享</option>
					<option value="1">未分享</option>
				</select>
			</div>

			<div class="form-group col-sm-2">
				<label>开始时间:</label>
				<div class="input-group">
				<input  type="text" class="form-control time" name="startTime" placeholder="开始时间...">
			 	<span class="input-group-addon"><i class="fa fa-calendar-o"></i></span>
				</div>
			</div>

			<div class="form-group col-sm-2">
				<label>结束时间:</label>
				<div class="input-group">
				<input  type="text" class="form-control time" name="endTime" placeholder="结束时间...">
				<span class="input-group-addon"><i class="fa fa-calendar-o"></i></span>
				</div>
			</div>
			<div class="form-group col-sm-2">
				<label>按标题名称查询:</label>
				<input type="text" name="word" @keyup.Enter="keyEnter()"
					   class="form-control" placeholder="请输入标题名称...">
			</div>
			<div class="form-group col-sm-1">
				<label>&nbsp;</label>
				<button type="button" onclick="searchNotes()" class="form-control btn btn-primary">
					<i class=" fa fa-search"></i>查询</button>
			</div>
			<script>
				//获取搜索条件
				var searchNotes = function () {
					var info = {};
					info.startTime = $("input[name=startTime]").val();
					info.endTime = $("input[name=endTime]").val();
					info.wd = $("input[name=word]").val();
					info.check = $("select[name=check]").val();
					info.share = $("select[name=share]").val();
					if(isEmpty(info.wd)){
					    delete info.wd ;
					}
					if(info.check === 'all'){
					    delete info.check;
					}
					if(info.share === 'all'){
					    delete info.share;
					}
					if(verify(info.startTime,'date') && verify(info.endTime,'date')){
                        info.startTime = moment(info.startTime, "YYYY-MM-DD")._d.getTime();
                        info.endTime = moment(info.endTime, "YYYY-MM-DD")._d.getTime();
                        if(info.endTime<info.startTime){
                            $("input[name=startTime]").val(moment(info.endTime).format("YYYY-MM-DD"));
                            $("input[name=endTime]").val(moment(info.startTime).format("YYYY-MM-DD"));
                            info.startTime = info.endTime;
						}
                        info.endTime = $("input[name=endTime]").val();
                        info.endTime = moment(info.endTime, "YYYY-MM-DD")
                            .add('days',1)._d.getTime();
					}else{
					    delete info.startTime;
					    delete info.endTime;
                    }
                    //条件为空时，可执行的语句
//                    if($.isEmptyObject(info)){
//                        console.log('info is Empty');
//                        return;
//                    }
                    info.curPage = 1;
                    info.pageSize = 5;
					getSearchResult(info,function () {
                        $("#pagination").html('');
						 resetPage();
                    });
                    return;
                }
                //获取符合条件的搜索结果
                var getSearchResult = function (info,callback) {
				    vue.info = info;
					$.ajax({
					    type:'post',
						url:'getSearchResult',
						data:info,
						success:function (result) {
                            data.notes = result.notes;
                            data.pageSize = result.pageSize;
                            data.curPage = result.curPage;
                            data.pageCount = result.pageCount;
                            data.count = result.count;
                            $("input[name=checkAll]")
                                .prop("checked", false);
                            data.indexs = [];
                        },
						complete:function () {
							if(typeof callback === "function"){
							    callback();
							}
                        }
					});
                }
				//重新设置页码
                var resetPage = function () {
				    var t_id = 'page_id'+new Date().getTime();
                    if(data.pageCount > 1){
                        $('#pagination').html(
                            '<ul id="'+t_id+'" class="pagination-sm"></ul>');
                        $("#"+t_id).twbsPagination({
                            totalPages: data.pageCount,
                            visiblePages: 7,
                            first:'首页',
                            last:'末页',
                            prev:'上一页',
                            next:'下一页',
                            onPageClick: function (event, page) {
                                var el_li =
                                    '<li class="disabled">' +
                                    '<a class="page-link">总页数:' +
                                    data.pageCount+'</a></li>';
                                $("#"+t_id).append(el_li);
                                if(page === data.curPage) return;
                                data.info.curPage = page;
                                getSearchResult(data.info,function () {
                                    $("input[name=checkAll]")
                                        .prop("checked", false);
                                    data.indexs = [];
                                });
                            }
                        });
					}
                }
			</script>
		</div><!--The box-body End -->
		<div class="box">
			<table class="table table-hover">
				<thead>
				<tr>
					<th><input type="checkbox"  name="checkAll"
					 onclick="checkAll('checkAll','childBox')"/></th>
					<th>笔记标题</th>
					<th>创建者</th>
					<th>所属类别</th>
					<th>审核状态</th>
					<th>分享状态</th>
					<th>创建日期</th>
					<th>管理工具</th>
				</tr>
				</thead>
				<tbody>
				<tr v-for="(note,index) in notes" v-if="note[0] != -1">
					<td><input type="checkbox" name="childBox"
							   v-bind:value="index" v-model="indexs"/></td>
					<td><a v-bind:href="'../static/next.html?id='+note[0]"
						  class="next" target="_blank">{{note[1]}}</a></td>
					<td v-text="vue2.user.nickname"></td>
					<td>{{note[2]}}</td>
					<td  v-if=" note[4] === 0">未审核</td>
					<td  v-if=" note[4] === 1">审核通过</td>
					<td  v-if=" note[5] === 0">分享</td>
					<td  v-if=" note[5] === 1">未分享</td>
					<td>{{moment(note[6]).format('YYYY-MM-DD HH:mm:ss')}}</td>
					<td>
						<button @click="share(index,1)" v-if="note[5] === 0" class="btn btn-default btn-xs fa fa-unlock-alt">取消分享</button>
						<button @click="share(index,0)" v-if="note[5] === 1" class="btn btn-default btn-xs fa fa-unlock">分享笔记</button>
						<a v-bind:href="'../static/update.html?nid='+note[0]"
						   target="_blank" class="btn btn-default btn-xs fa fa-edit">修改</a>
						<button @click="status(index,1)" class="btn btn-default btn-xs fa fa-search">删除</button>
					</td>
				</tr>
				</tbody>
			</table>
			<!--</div>-->
			<div style="text-align:center;" id="pagination">
				<ul id="pagination-demo" class="pagination-sm">
				</ul>
			</div>
		</div>
	</div>
</div>
<script>
    /**
     * 复选框全选或全不选的函数
     * @param {Object} allName 全选框的name，字符参数-'name'
     * @param {Object} childName 子复选框的name，字符参数-'name'
     */
    function checkAll(allName, childName) {
        var isChecked = $("input[name='" + allName + "']").prop("checked");
        if(isChecked){
            data.indexs = [];
            $("input[name='" + childName + "']").each(function() {
                //$(this).prop("checked", isChecked);
                data.indexs.push($(this).attr("value"));
            });
		}else{
            data.indexs = [];
		}
    }

    var data = {
        message:'',
        pageSize:5,
        pageCount:1,
        curPage:1,
        count:0,
        notes:[],
        indexs:[],
		info:{curPage:1,pageSize:5}
    };

    var vue = new Vue({
        el: '#app',
        data: data,
		methods:{
            del:function (index) {
                data.notes.splice(index, 1);
            },
			status:function (index,status) {
				changeStatus(index,status);
            },
            keyEnter:function () {
				searchNotes();
            }
		}
    });

    var changeShare = function (index,status) {
        var sendData = {
            id:data.notes[index][0],
            share:status
        };
        if(data.notes[index][0] != -1)
        $.ajax({
            type:'post',
            url:'changeShare',
            data:sendData,
            success:function (result) {
                if(result){
                    vue.$set(data.notes[index],5,status);
                }
            }
        });
    };

    var changeStatus = function (index,status) {
        var sendData = {
            id:data.notes[index][0],
            status:status
        };
        if(data.notes[index][0] != -1)
        $.ajax({
            type:'post',
            url:'changeStatus',
            data:sendData,
            success:function (result) {
                if(result){
                    vue.$set(data.notes[index],0,-1);
                }
            }
        });
    };

    var changShareAll = function (share) {
        var tmp = {title:'',msg:''};
        if(share === 1 ){
            tmp.title = '批量取消分享';
			tmp.msg = '确认不分享所选项？';
        }else{
            tmp.title = '批量分享';
			tmp.msg = '确认分享所选项？';
        }
		qiao.bs.confirm(tmp
		,function () {
			$.each(data.indexs,function (index) {
				if(data.notes[data.indexs[index]][0] != -1
					&&data.notes[data.indexs[index]][5] !== share)
					changeShare(data.indexs[index],share);
			})
        }),function () {

        }
    }

    var delAll = function (check) {
        var tmp = {};
		tmp.title = '批量删除';
		tmp.msg = '确认删除所选项？';
        qiao.bs.confirm(tmp
            ,function () {
			$.each(data.indexs,function (index) {
				if(data.notes[data.indexs[index]][0] != -1)
					changeStatus(data.indexs[index],check);
			})
            }),function () {

        }
    }

    $(function () {
        getSearchResult(data.info,function () {
            $("#pagination").html('');
            $("input[name=endTime]").val(moment().format("YYYY-MM-DD"));
            qiao.bs.bsdate('.time');
            resetPage();
        });
    });
</script>